<template>
  <a-drawer :width="400" :visible="visible" title="详情" @cancel="cancel">
    <div class="approval-drawer">
      <div class="title">
        <div class="release-user-info">
          <div>编号：{{ currentApprovalInfo.approvalCode }}</div>
          <!-- <div><a-button>修改</a-button></div> -->
        </div>
        <h3>{{ currentApprovalInfo.approvalTitle }}</h3>
        <div>{{ currentApprovalInfo.currentApprovalResult }}</div>
      </div>
      <a-divider />
      <div class="ctl-info">
        <div
          class="ctl-item"
          v-for="item in currentApprovalInfo.ctlValues"
          :key="item.id"
        >
          <div class="ctl-title">{{ item.cnName }}</div>
          <div class="ctl-value">{{ item.ctlValue }}</div>
        </div>
      </div>
      <a-divider />
      <div class="process-info">
        <a-steps :current="current" direction="vertical">
          <template v-for="item in approvalInfo.pointDetails" :key="item.id">
            <a-step v-if="item.pointType !== 6">
              <div v-for="user in item.participantInfos" :key="user.id">
                <div class="user-info">
                  <div class="user-name">
                    {{
                      item.pointType === 1
                        ? '审核人 '
                        : item.pointType === 2
                        ? '抄送人 '
                        : ''
                    }}
                    {{ user.objName }}
                    {{ getProcessRateByNumber(user.approvalResult) }}
                  </div>
                  <div
                    v-if="user.opinions && item.pointType === 1"
                    class="opinions"
                  >
                    {{ user.opinions }}
                  </div>
                </div>
              </div>
              <template #description>节点类型{{ item.pointType }} </template>
            </a-step>
          </template>
        </a-steps>
      </div>
    </div>
    <template #footer>
      <div class="drawer-footer">
        <a-space class="drawer-footer-operator">
          <IconText :icon="'icon-edit'" :text="'修改'" />
          <IconText @click="revoke" :icon="'icon-undo'" :text="'撤销'" />
          <IconText :icon="'icon-message'" :text="'评论'" />
        </a-space>
        <a-space v-if="!currentApprovalInfo.approvalIsEnd">
          <!-- 如果是首个审批人，不显示退回按钮 TODO:-->
          <a-button type="outline" size="large" @click="showOpinionsModal(2)"
            >退回</a-button
          >
          <a-button size="large" @click="showOpinionsModal(3)">拒绝</a-button>
          <a-button type="primary" size="large" @click="showOpinionsModal(1)"
            >同意</a-button
          >
        </a-space>
      </div>
    </template>
  </a-drawer>
  <ApprovalOpinionsModal
    v-model:visible="opinionsModalVisible"
    v-model:backNodeId="approvalData.detail.backNodeId"
    :opinions="approvalData.detail.participants.opinions"
    @submit="approvalEvent"
    :approverList="approverList"
    :approvalType="approvalType"
  />
</template>

<script setup lang="ts">
import IconText from '@/components/IconText.vue';
import {
  getApprovalReleaseByApprovalCode,
  editApprovalRelease,
  delApprovalRelease
} from '@/apis/approvalExecute';
import { getPointTypeByNumber, getProcessRateByNumber } from '@/utils/approval';
import type {
  EditApprovalRelease,
  DelApprovalRelease
} from '@/apis/approvalExecute/type';
import ApprovalOpinionsModal from './ApprovalOpinionsModal.vue';
import type {
  ApprovalParams,
  CurrentApprovalInfo
} from '@/apis/approvalExecute/repType';
import { getApprovalPoint, getApprovalPointIds } from '@/utils/approval';

const props = withDefaults(
  defineProps<{
    approvalCode?: string;
    visible: boolean;
    activeData?: any;
  }>(),
  {
    visible: false
  }
);
const emit = defineEmits(['update:visible']);
const cancel = () => {
  emit('update:visible', false);
};
const approvalInfo = ref<ApprovalParams>({});
const currentApprovalInfo = ref<CurrentApprovalInfo>({});
// 获取审批详情
const getApprovalDetail = async () => {
  if (!props.approvalCode) return;
  const res = await getApprovalReleaseByApprovalCode(props.approvalCode);
  approvalInfo.value = res?.repoSingleApprovalParam?.approvalInfo || {};
  currentApprovalInfo.value =
    res?.repoSingleApprovalParam?.currentApprovalInfo || {};
  const index = approvalInfo.value.pointDetails?.findIndex(
    (item) => item.isCurrentPoint
  );
  current.value = index || 0 + 1;
  getFormData();
};
watch(
  () => props.visible,
  (val) => {
    val && getApprovalDetail();
  }
);
const current = ref(0);
const approvalData = reactive<{ detail: EditApprovalRelease }>({
  detail: { participants: { opinions: '' } }
});
// 审批信息
const getFormData = () => {
  // 解构接口对象组装审批需要的信息
  const { appCode, approvalCode } = approvalInfo.value;
  const { processId, pointType, examineType, nodeDetailId } =
    currentApprovalInfo.value;
  const { objId, pointValueId, orderNo, approvalResult, objName } =
    currentApprovalInfo.value.participants[0];
  approvalData.detail = {
    appCode,
    approvalCode,
    examineType,
    processId,
    nodeType: pointType,
    nodeDetailId,
    participants: { objId, pointValueId, orderNo, approvalResult: 1, objName }
  };
};
const approvalEvent = async (opinions: string) => {
  approvalData.detail.participants.opinions = opinions;
  const { nodeDetailId, backNodeId } = approvalData.detail;
  const { pointDetails } = approvalInfo.value;
  // 如果backNodeId存在，说明是退回事件
  if (backNodeId && pointDetails) {
    //获取当前节点到退回至节点的区间审核节点id
    const ids = getApprovalPointIds(backNodeId, pointDetails);
    approvalData.detail.backIntervalNodeIds = ids;
  }
  await editApprovalRelease(approvalData.detail);
  getApprovalDetail();
};
const revokeParams = reactive<DelApprovalRelease>({});
//审批动作
const revoke = async () => {
  // opinionsModalVisible.value = true;
  const { appCode, approvalCode } = approvalInfo.value;
  revokeParams.appCode = appCode;
  revokeParams.approvalCode = approvalCode;
  await delApprovalRelease(revokeParams);
};
const opinionsModalVisible = ref(false);
const approvalType = ref(0); // 审批类型1同意2退回3拒绝
const showOpinionsModal = (approvalResult: number) => {
  approvalType.value = approvalResult;
  opinionsModalVisible.value = true;
  approvalData.detail.participants.approvalResult = approvalResult;
  //不是退回事件，把退回至审核人列表设为空
  if (approvalResult !== 2) approverList.value = [];
  else {
    const { pointDetails } = approvalInfo.value;
    if (typeof pointDetails !== 'object') approverList.value = [];
    let approver = getApprovalPoint(pointDetails);
    approverList.value = approver;
    if (approver.length < 2) approverList.value = [];
  }
};

const approverList = ref(); // 审核人之前的审核人列表，用于退回至事件
</script>

<style lang="less" scoped>
.approval-drawer {
  .title {
    .release-user-info {
      display: flex;
      justify-content: space-between;
      color: #888;
    }
  }
  .ctl-info {
    .ctl-item {
      margin: 16px 0;
      .ctl-title {
        color: #888;
      }
      .ctl-value {
        font-size: 16px;
      }
    }
  }
  .process-info {
    .user-info {
      display: flex;
      .opinions {
        background: #eee;
        border-radius: 5px;
        padding: 0 6px;
        color: #888;
        font-size: 12px;
      }
    }
  }
}
.drawer-footer {
  display: flex;

  .drawer-footer-operator {
    flex: 1;
    display: flex;
    justify-content: space-around;
  }
}
</style>
